import React, {useCallback, useState} from "react";

export default function App() {
    const [name, setName] = useState("张三")

    const changeName = () => {
        setName("李四")
    }

    // useCallback作用: 用来缓存函数 如果deps为[] 则刷新页面会创建1次printName函数，name值修改后App函数重新渲染不会再次创建printName函数，name值打印也是第一次的张三
    // 如果deps为[name] 则每次name更新，App函数重新渲染会再次创建printName函数，name值打印也是更新后的值
    const printName = useCallback(() => {
        console.log(name)
    }, [name])

    return <div>
        <span>{name}</span>
        <button onClick={changeName}>click</button>
        <button onClick={printName}>click</button>
    </div>
}